<template>
  <div id="top" class="thishead" v-if="this.$store.state.count">
    <div class="thishead1">
      <div class="head-img">
        <img src="http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg" alt="">
      </div>
      <div class="thecun">
        <img src="../../../static/img/brand@2x.png" alt="">
         粥品香坊（大运村）
        <div>{{arr.description}}/38分钟到达</div>
        <p><img src="../../../static/img/decrease_1@2x.png" alt="">在线支付满28减5，满50减10</p>
      </div>
      <div @click="boo=true" class="five">5个></div>
      <div @click="boo=true" class="thisheadlast">
        <img src="../../../static/img/bulletin@2x.png" alt="">
        <p>{{arr.bulletin}}</p>
        <div> > </div>
      </div>
    </div>
    <!--遮盖层-->
    <transition name="fade">
      <div v-if="boo"  class="blcmu">
        <div>
          <div class="head-title">粥品香坊（大运村）</div>
          <div>
            <div class="block" style="text-align: center">
              <el-rate v-model="value1" disabled></el-rate>
            </div>
          </div>
          <div class="nrhead">
            <i></i>
            优惠信息
            <i></i>
          </div>
          <div class="iico">
            <img src="../../../static/img/decrease_1@2x.png" alt="">
            {{arr.supports[0].description}}
          </div>
          <div class="iico">
            <img src="../../../static/img/discount_2@2x.png" alt="">
            {{arr.supports[1].description}}
          </div>
          <div class="iico">
            <img src="../../../static/img/discount_2@2x.png" alt="">
            {{arr.supports[2].description}}
          </div>
          <div class="iico">
            <img src="../../../static/img/special_1@2x.png" alt="">
            {{arr.supports[3].description}}
          </div>
          <div class="iico">
            <img src="../../../static/img/special_1@2x.png" alt="">
            {{arr.supports[4].description}}
          </div>
          <div class="nrhead">
            <i></i>
            商家公告
            <i></i>
          </div>
          <div class="cont">{{arr.bulletin}}</div>
          <section class="iic">
            <svg @click="boo=false" style="width: 0.64rem;height: 0.64rem;">
              <image xlink:href="../../../static/img/close.svg" style="width: 0.64rem;height: 0.64rem"></image>
            </svg>
          </section>
        </div>
        <!--取消标签-->
      </div>
    </transition>
  </div>
</template>

<script>

export default {
  data () {
    return {
      value1: 4,
      // arr: '',
      boo: false
    }
  },
  created () {
    setTimeout(() => {
      // this.arr = this.$store.state.count.seller
      // this.value1 = this.$store.state.count.seller.score
      // console.log(this.$store.state.count)
    })
    // console.log(this.hei)
  },
  computed: {
    arr () {
      return this.$store.state.count.seller
    }
  }
}

</script>

<style scoped lang='less'>
  .thishead {
    background: url("http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg")no-repeat 0px 0px;
    background-size: cover;
    width: 7.5rem;
    height: 2.68rem;
     .thishead1{
       position: relative;
       padding-top:0.48rem ;
       padding-left:0.48rem;
       box-sizing: border-box;
       color: rgb(255,255,255);
       width: 7.5rem;
       height: 2.68rem;
       background-color:rgba(7,17,27,0.5) ;
       .head-img>img{
         float: left;
         width: 1.28rem;
         height: 1.28rem;
         border-radius: 0.04rem;
       }
       .thecun{
         float: left;
         margin-left: 0.32rem;
         font-size: 0.32rem;
         font-weight: bold;
        &> img{
           width: 0.60rem;
           height: 0.36rem;
           vertical-align: middle;
         }
         div{
           font-size: 0.24rem;
           font-weight: 200;
           line-height: 0.24rem;
           margin-top: 0.16rem;
         }
         p{
           font-size: 0.20rem;
           margin-top: 0.2rem;
           font-weight: 200;
           img{
             width: 0.24rem;
             height: 0.24rem;
             margin-right: 0.08rem;
             vertical-align: middle;
           }
         }
       }
       .five{
         float: right;
         font-size: 0.20rem;
         width: 1rem;
         height: 0.48rem;
         background-color: rgba(0,0,0,0.2);
         border-radius: 16rem;
         text-align: center;
         line-height: 0.48rem;
         margin-top: 0.85rem;
         margin-right: 0.24rem;
       }
       .thisheadlast{
         position: absolute;
         left: 0;
         bottom: 0;
         font-size: 0.20rem;
         font-weight: 200;
         width: 7.5rem;
         height: 0.56rem;
         background-color: rgba(7,17,27,0.2);
         padding-right: 0.24rem;
         padding-left: 0.24rem;
         box-sizing: border-box;
         display: flex;
         align-items: center;
         justify-content: space-between;
         img{
           width: 0.44rem;
           height: 0.24rem;
         }
         p{
           height: 0.56rem;
           line-height: 0.56rem;
           width: 6rem;
           overflow: hidden;
           text-overflow:ellipsis;
           white-space: nowrap;
         }
       }
     }
  }
  .blcmu{
    overflow: auto;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 99;
    background-color: rgba(7,17,27,0.8);
    padding-left: 0.72rem;
    padding-right: 0.72rem;
    /*padding-bottom: 0.24rem;*/
    box-sizing: border-box;
    line-height: 28px;
    &>div{
      min-height: 100%;
      position: relative;
      padding-bottom:1.6rem;
      padding-top: 1.28rem;
      box-sizing: border-box;
      .iic{
        position:absolute;
        bottom: 0rem;
        width: 100%;
        text-align: center;
        height: 1.6rem;
      }
    }
    .head-title{
      color: rgb(255,255,255);
      font-weight: 700;
      line-height: 0.32rem;
      font-size: 0.32rem;
      text-align: center;
    }
    .nrhead{
      display: flex;
      justify-content: space-between;
      font-size: 0.28rem;
      font-weight: 700;
      color: rgb(255,255,255);
      margin-top: 0.56rem;
      margin-bottom: 0.48rem;
      i{
        display: inline-block;
        height: 0.25rem;
        width: 2.24rem;
        border-bottom:0.02rem rgba(255,255,255,0.2) solid;
      }
    }
    .iico{
      font-size: 0.24rem;
      font-weight: 200;
      line-height: 0.24rem;
      color: rgb(255,255,255);
      margin-left: 0.24rem;
      margin-bottom: 0.24rem;
      img{
        height: 0.24rem;
        width: 0.24rem;
        vertical-align: middle;
      }
    }
    .cont{
      padding: 0rem 0.24rem;
      font-size: 0.24rem;
      font-weight: 200;
      line-height: 0.48rem;
      color: rgb(255,255,255);
    }
  }
  .fade-enter-active {
    transition: all .3s ease;
  }
  .fade-leave-active {
    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .fade-enter, .fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */ {
    opacity: 0;
  }
</style>
